﻿<div class="d-flex align-center flex-grow-1 d-md-none">
    <MudTooltip Delay="1000" Text="Drawer">
        <MudIconButton OnClick="DrawerToggleCallback" Icon="@Icons.Material.Rounded.Notes" Color="Color.Inherit" Edge="Edge.Start" aria-label="Open drawer" />
    </MudTooltip>
    <MudSpacer />
    <NavLink ActiveClass="d-flex align-center" href="/">
        <MudBlazorLogo Class="docs-mudblazor-logo" />
        <MudText Color="Color.Primary" Typo="Typo.h5" Class="docs-brand-text">MudBlazor</MudText>
    </NavLink>
    <MudSpacer />
    <MudTooltip Delay="1000" Text="Search">
        <MudIconButton Icon="@Icons.Material.Rounded.Search" Color="Color.Inherit" Edge="Edge.End" OnClick="@(() => OpenSearchDialog())" aria-label="Open search dialog" />
    </MudTooltip>
</div>
<div class="d-none d-md-flex align-center flex-grow-1">
    <NavLink ActiveClass="d-flex align-center me-4" href="/">
        <MudBlazorLogo Class="docs-mudblazor-logo" />
        <MudText Color="Color.Primary" Typo="Typo.h5" Class="docs-brand-text">MudBlazor</MudText>
    </NavLink>
    <MudButton Href="/getting-started/installation" Color="Color.Inherit" Variant="Variant.Text" Class="@GetActiveClass(DocsBasePage.GettingStarted)">Get Started</MudButton>
    <MudButton Href="/docs/overview" Color="Color.Inherit" Variant="Variant.Text" Class="@GetActiveClass(DocsBasePage.Docs)">Docs</MudButton>
    <MudButton Href="/mud/introduction" Color="Color.Inherit" Variant="Variant.Text" Class="@GetActiveClass(DocsBasePage.DiscoverMore)">Learn More</MudButton>
    <MudMenu Color="Color.Inherit" Variant="Variant.Text" Class="mx-1 px-3" PopoverClass="docs-layout-menu-shadow" ListClass="d-flex px-4 pb-2 docs-appbar-special-menu" LockScroll="true" Label="Products" EndIcon="@Icons.Material.Filled.KeyboardArrowDown" AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
        <MudList T="string">
            <MudListSubheader>
                Products
            </MudListSubheader>
            <MudListItem Href="https://mudblazor.com/">
                <div class="d-flex">
                    <MudText Color="Color.Primary">MudBlazor</MudText>
                </div>
                <MudText Typo="Typo.body2">Blazor component library</MudText>
            </MudListItem>
            <MudListItem Href="https://try.mudblazor.com/">
                <div class="d-flex">
                    <MudText Color="Color.Primary">Try</MudText><MudText>MudBlazor</MudText>
                </div>
                <MudText Typo="Typo.body2">Online code editor with Blazor</MudText>
            </MudListItem>
            <MudListItem Href="https://github.com/MudBlazor/ThemeManager">
                <div class="d-flex">
                    <MudText>Theme</MudText><MudText Color="Color.Secondary">Manager</MudText>
                </div>
                <MudText Typo="Typo.body2">Manage your theme live in your app</MudText>
            </MudListItem>
            <MudListItem Href="https://github.com/MudBlazor/Templates">
                <div class="d-flex">
                    <MudText>Templates</MudText>
                </div>
                <MudText Typo="Typo.body2">Blazor templates loaded with MudBlazor</MudText>
            </MudListItem>
        </MudList>
        <MudList T="string" Class="relative">
            <MudListSubheader>
                Other
            </MudListSubheader>
            <MudOverlay Visible="true" LightBackground="true" Absolute="true" Class="docs-menu-overlay" />
            <MudListItem>
                <MudBadge Class="d-flex mr-16" Content="@_badgeTextSoon" Color="Color.Info" Overlap="true">
                    <MudText>Mud</MudText><MudText Color="Color.Warning">Extensions</MudText>
                </MudBadge>
                <MudText Typo="Typo.body2">Official and Community Extensions</MudText>
            </MudListItem>
        </MudList>
    </MudMenu>
    <MudSpacer />
    @if (DisplaySearchBar)
    {
        <MudAutocomplete @ref="_searchAutocomplete" T="ApiLinkServiceEntry" Class="docs-search-bar mx-4"
                         AutoFocus="false" Placeholder="Search" Variant="Variant.Outlined" MaxHeight="480"
                         SearchFunc="async (text, token) => await Search(text, token)" DebounceInterval="0"
                         ValueChanged="OnSearchResult" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" AdornmentAriaLabel="Search adornment">
            <ItemTemplate Context="result">
                <MudText>@result.Title</MudText> <MudText Typo="Typo.body2">@result.SubTitle</MudText>
            </ItemTemplate>
        </MudAutocomplete>
        <MudDivider FlexItem="true" Vertical="true" DividerType="DividerType.Middle" Class="mx-4 my-4" />
    }
    else
    {
        <MudTooltip Delay="1000" Text="Search">
            <MudIconButton Icon="@Icons.Material.Rounded.Search" Color="Color.Inherit" OnClick="@(() => OpenSearchDialog())" aria-label="Open search dialog" />
        </MudTooltip>
    }
    <AppbarButtons />
    <MudTooltip Delay="1000" Text="GitHub">
        <MudIconButton Href="https://github.com/MudBlazor/MudBlazor/" Target="_blank" Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Edge="Edge.End" aria-label="Open GitHub repository" />
    </MudTooltip>
</div>

<MudDialog @bind-Visible="IsSearchDialogOpen" Options="_dialogOptions" Class="docs-gray-bg" ContentClass="docs-mobile-dialog-search d-flex flex-column" DefaultFocus="DefaultFocus.FirstChild">
    <DialogContent>
        <MudAutocomplete @ref="_searchAutocomplete" T="ApiLinkServiceEntry" PopoverClass="docs-mobile-dialog-search-popover" DropdownSettings="@_dropdownBehavior"
                         AutoFocus="true" Placeholder="Search" Clearable="true" Variant="Variant.Outlined" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search"
                         SearchFunc="async (text, token) => await Search(text, token)" DebounceInterval="0"
                         ValueChanged="OnSearchResult" OpenChanged="o => _searchDialogAutocompleteOpen = o" ReturnedItemsCountChanged="c => _searchDialogReturnedItemsCount = c">
            <ItemTemplate Context="result">
                <MudText>@result.Title</MudText> <MudText Typo="Typo.body2">@result.SubTitle</MudText>
            </ItemTemplate>
        </MudAutocomplete>

        @* This text element will always be rendered but it's easier to write it this way *@
        <MudText Typo="Typo.body2" Class="flex-grow-1 mud-text-secondary" Align="Align.Center">
            @if (!_searchDialogAutocompleteOpen)
            {
                @("Use the box above to search the docs")
            }
            else if (_searchDialogReturnedItemsCount == 0)
            {
                @("No results found")
            }
        </MudText>
    </DialogContent>
</MudDialog>
